<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatLog - AI对话数据管理专家</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            background-color: #f9fafb;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6b46c1 0%, #4299e1 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4em;
            line-height: 0.8;
            margin-right: 0.1em;
            color: #6b46c1;
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4 font-serif">
                        <span class="block">ChatLog</span>
                        <span class="text-purple-200">AI对话数据管理专家</span>
                    </h1>
                    <p class="text-xl text-purple-100 mb-8 max-w-lg">
                        专为研究人员、开发者和AI爱好者设计，高效管理、分析和利用各类AI聊天记录数据
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="https://github.com/sjzar/chatlog" class="bg-white text-purple-800 hover:bg-purple-100 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fab fa-github mr-2 text-xl"></i> GitHub 仓库
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-800 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-list-ul mr-2"></i> 功能探索
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-400 rounded-full opacity-20 animate-pulse"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-400 rounded-full opacity-20 animate-pulse delay-300"></div>
                        <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
                            <div class="bg-gray-800 py-2 px-4 flex items-center">
                                <div class="flex space-x-2">
                                    <span class="w-3 h-3 rounded-full bg-red-500"></span>
                                    <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
                                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
                                </div>
                                <div class="ml-4 text-xs text-gray-400">ChatLog - 对话管理</div>
                            </div>
                            <div class="p-4">
                                <div class="flex mb-4">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-user text-blue-600"></i>
                                    </div>
                                    <div class="bg-gray-100 rounded-lg p-3 text-sm max-w-xs">
                                        昨天的讨论中，AI提到了量子计算的关键突破点是什么？
                                    </div>
                                </div>
                                <div class="flex mb-4 pl-10">
                                    <div class="bg-purple-100 rounded-lg p-3 text-sm max-w-xs">
                                        <div class="font-semibold text-purple-800 mb-1">ChatGPT 4.0</div>
                                        根据2023年11月的记录，我们讨论了量子纠错码的最新进展...
                                    </div>
                                </div>
                                <div class="text-xs text-gray-500 mt-2 flex items-center">
                                    <i class="fas fa-tags mr-1"></i>
                                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1">量子计算</span>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1">研究</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">核心功能与优势</h2>
                <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300 hover:shadow-xl border border-gray-100">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-plug text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">多平台导入</h3>
                    <p class="text-gray-600 text-center">
                        支持ChatGPT、Claude、Bard、Copilot、文心一言、讯飞星火等主流AI平台，解决跨平台数据碎片化问题
                    </p>
                </div>

                <!-- Feature 2 -->
                <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300 hover:shadow-xl border border-gray-100">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-search text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">智能管理与检索</h3>
                    <p class="text-gray-600 text-center">
                        通过关键词搜索、标签分类和自定义筛选，快速查找和复用有价值的历史对话内容
                    </p>
                </div>

                <!-- Feature 3 -->
                <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300 hover:shadow-xl border border-gray-100">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-chart-pie text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">数据分析与可视化</h3>
                    <p class="text-gray-600 text-center">
                        自动生成使用频率、主题分布等统计图表，帮助了解AI使用模式及效率
                    </p>
                </div>

                <!-- Feature 4 -->
                <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300 hover:shadow-xl border border-gray-100">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-file-export text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">对话数据导出</h3>
                    <p class="text-gray-600 text-center">
                        支持Markdown、JSON、CSV等多种格式导出，便于二次分析或作为训练数据使用
                    </p>
                </div>

                <!-- Feature 5 -->
                <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300 hover:shadow-xl border border-gray-100">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-lock text-red-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">本地化部署</h3>
                    <p class="text-gray-600 text-center">
                        保障数据隐私安全，适合对数据敏感的用户和机构
                    </p>
                </div>

                <!-- Feature 6 -->
                <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300 hover:shadow-xl border border-gray-100">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-puzzle-piece text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">模块化设计</h3>
                    <p class="text-gray-600 text-center">
                        通过插件机制支持持续扩展更多AI平台，具有良好的可扩展性
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Section -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">典型使用场景</h2>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="bg-purple-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-flask text-purple-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">学术研究</h3>
                                <p class="text-gray-600">
                                    研究人员可归档重要研究过程中的AI对话，建立知识库并便于追溯思路。不再为找不到之前与AI讨论过的关键见解而烦恼。
                                </p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-building text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">企业知识管理</h3>
                                <p class="text-gray-600">
                                    企业用户分析团队与AI交互模式，优化工作流程，同时保存关键对话作为企业知识资产，确保信息不因平台更迭而丢失。
                                </p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-user-astronaut text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">个人效率提升</h3>
                                <p class="text-gray-600">
                                    个人用户可通过分析自己的AI使用习惯，发现知识盲区，优化提问技巧，提高AI辅助效率。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                        <div class="bg-gray-800 py-3 px-6 flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-chart-bar text-blue-400 mr-2"></i>
                                <span class="text-white text-sm font-medium">ChatLog 数据分析面板</span>
                            </div>
                            <div class="flex space-x-2">
                                <div class="w-2 h-2 rounded-full bg-gray-600"></div>
                                <div class="w-2 h-2 rounded-full bg-gray-600"></div>
                                <div class="w-2 h-2 rounded-full bg-gray-600"></div>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-6">
                                <div>
                                    <h3 class="font-semibold text-lg">对话主题分布</h3>
                                    <p class="text-gray-500 text-sm">最近30天</p>
                                </div>
                                <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-medium">
                                    <i class="fas fa-sliders-h mr-1"></i> 筛选
                                </div>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <div class="flex justify-between mb-1">
                                        <span class="text-sm font-medium">编程技术</span>
                                        <span class="text-sm text-gray-500">42%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full" style="width: 42%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between mb-1">
                                        <span class="text-sm font-medium">学术研究</span>
                                        <span class="text-sm text-gray-500">28%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-purple-600 h-2 rounded-full" style="width: 28%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between mb-1">
                                        <span class="text-sm font-medium">创意写作</span>
                                        <span class="text-sm text-gray-500">15%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-green-600 h-2 rounded-full" style="width: 15%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between mb-1">
                                        <span class="text-sm font-medium">其他</span>
                                        <span class="text-sm text-gray-500">15%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-yellow-600 h-2 rounded-full" style="width: 15%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-8">
                                <h3 class="font-semibold text-lg mb-4">模型使用频率</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="bg-blue-50 p-4 rounded-lg">
                                        <div class="text-blue-600 font-bold text-xl">65%</div>
                                        <div class="text-sm text-gray-600">ChatGPT</div>
                                    </div>
                                    <div class="bg-purple-50 p-4 rounded-lg">
                                        <div class="text-purple-600 font-bold text-xl">22%</div>
                                        <div class="text-sm text-gray-600">Claude</div>
                                    </div>
                                    <div class="bg-green-50 p-4 rounded-lg">
                                        <div class="text-green-600 font-bold text-xl">8%</div>
                                        <div class="text-sm text-gray-600">Bard</div>
                                    </div>
                                    <div class="bg-yellow-50 p-4 rounded-lg">
                                        <div class="text-yellow-600 font-bold text-xl">5%</div>
                                        <div class="text-sm text-gray-600">其他</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">快速上手指南</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">只需简单几步，开始高效管理您的AI对话数据</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Step 1 -->
                <div class="bg-gray-50 rounded-xl p-6 relative overflow-hidden border border-gray-200">
                    <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
                        步骤 1
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-download text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">获取ChatLog</h3>
                    <p class="text-gray-600 mb-4">从GitHub仓库克隆或下载项目</p>
                    <div class="bg-gray-100 p-3 rounded-lg font-mono text-sm overflow-x-auto">
                        git clone https://github.com/sjzar/chatlog.git
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="bg-gray-50 rounded-xl p-6 relative overflow-hidden border border-gray-200">
                    <div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
                        步骤 2
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-cogs text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">安装依赖</h3>
                    <p class="text-gray-600 mb-4">安装必要的Python依赖包</p>
                    <div class="bg-gray-100 p-3 rounded-lg font-mono text-sm overflow-x-auto">
                        pip install -r requirements.txt
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="bg-gray-50 rounded-xl p-6 relative overflow-hidden border border-gray-200">
                    <div class="absolute top-0 right-0 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
                        步骤 3
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-play text-green-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">启动程序</h3>
                    <p class="text-gray-600 mb-4">运行ChatLog主程序</p>
                    <div class="bg-gray-100 p-3 rounded-lg font-mono text-sm overflow-x-auto">
                        python -m chatlog
                    </div>
                </div>

                <!-- Step 4 -->
                <div class="bg-gray-50 rounded-xl p-6 relative overflow-hidden border border-gray-200">
                    <div class="absolute top-0 right-0 bg-yellow-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
                        步骤 4
                    </div>
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-database text-yellow-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">导入数据</h3>
                    <p class="text-gray-600">导入您的第一个对话记录（支持手动导入或自动同步）</p>
                </div>
            </div>

            <div class="mt-16 bg-purple-50 rounded-xl p-8 border border-purple-200">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-2/3 mb-6 md:mb-0">
                        <h3 class="text-2xl font-bold mb-2 font-serif">立即开始您的AI对话管理之旅</h3>
                        <p class="text-purple-800">ChatLog完全开源免费(MIT许可证)，无需注册即可使用。资源占用低，适合在个人电脑上运行。</p>
                    </div>
                    <div class="md:w-1/3 flex justify-center md:justify-end">
                        <a href="https://github.com/sjzar/chatlog" class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2 text-xl"></i> 访问GitHub
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tech Specs -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row">
                <div class="md:w-1/2 md:pr-10 mb-10 md:mb-0">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">技术特点</h2>
                    <div class="drop-cap text-gray-700 leading-relaxed">
                        ChatLog采用模块化设计，通过插件机制支持持续扩展更多AI平台，具有良好的可扩展性和社区参与空间。其本地化部署特性保障了数据隐私安全，适合对数据敏感的用户。
                    </div>
                    <div class="mt-6 space-y-4">
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-code-branch text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-1">开源免费</h3>
                                <p class="text-gray-600">MIT许可证，可自由使用、修改和分发</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-lock text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-1">数据安全</h3>
                                <p class="text-gray-600">所有数据本地存储，不会上传到云端</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-purple-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-puzzle-piece text-purple-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-1">模块化架构</h3>
                                <p class="text-gray-600">易于扩展新平台支持，社区可贡献插件</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                        <div class="bg-gray-800 py-3 px-6 flex items-center">
                            <i class="fas fa-code text-blue-400 mr-2"></i>
                            <span class="text-white text-sm font-medium">技术架构概览</span>
                        </div>
                        <div class="p-6">
                            <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
                            <div class="mermaid">
                                graph TD
                                    A[用户界面] --> B[核心管理模块]
                                    B --> C[数据存储]
                                    B --> D[插件系统]
                                    D --> E[ChatGPT插件]
                                    D --> F[Claude插件]
                                    D --> G[Bard插件]
                                    D --> H[...其他插件]
                                    B --> I[分析引擎]
                                    I --> J[统计报告]
                                    I --> K[可视化图表]
                                    B --> L[导出模块]
                                    L --> M[Markdown]
                                    L --> N[JSON]
                                    L --> O[CSV]
                            </div>
                            <div class="mt-6 text-sm text-gray-500">
                                <p>基本使用不要求专业技术背景，但进阶功能（如自定义插件开发）需要一定的Python知识。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">准备好提升您的AI对话管理效率了吗？</h2>
            <p class="text-xl mb-8 text-blue-100 max-w-2xl mx-auto">立即下载ChatLog，体验高效的AI对话数据管理解决方案</p>
            <a href="https://github.com/sjzar/chatlog" class="inline-block bg-white text-purple-800 hover:bg-gray-100 font-semibold py-4 px-10 rounded-lg transition duration-300 text-lg">
                <i class="fab fa-github mr-2"></i> 访问GitHub仓库
            </a>
        </div>
    </section>
</body>
</html>